import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12
Rectangle{
    anchors.fill: parent
    color:"#f5f5f5"
    property string xuanzhong:"QQ"

    Rectangle{
        id:laetLogin
        height:parent.height
        width:500
        Image{
            anchors.fill: parent
            source: "qrc:/images/leftBJ"
        }
    }

    Rectangle{
        anchors.right: parent.right
        id:rightLogin
        height:parent.height
        width:parent.width-laetLogin.width

        //双按钮
        Rectangle{
            z:999
            height:40
            width:80
            anchors.right: parent.right
            anchors.top: parent.top
            color:"#ffffff"
            RowLayout{
                anchors.fill: parent
                Button{
                    id:shezhiBtn
                    height:40
                    width: 40
                    icon {

                        height:25
                        width:25
                        color:"#dddee0"
                        source: "qrc:/images/shezhi"
                    }
                    background: Rectangle{
                        id:shezhiBtnRectangle
                        anchors.fill: parent
                        color:"#ffffff"

                        MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true


                            onEntered: {
                                shezhiBtn.icon.color="#c1c2c5"


                            }
                            onExited: {
                                shezhiBtn.icon.color="#dddee0"

                            }
                            onClicked: {
                            }
                        }
                    }



                }

                Button{
                    id:chaBtn
                    height:40
                    width: 40
                    icon {

                        height:18
                        width:18
                        color:"#dddee0"
                        source: "qrc:/images/cha"
                    }
                    background: Rectangle{
                        id:chaBtnRectangle
                        anchors.fill: parent
                        color:"#ffffff"

                        MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true

                            onEntered: {
                                chaBtn.icon.color="#c1c2c5"


                            }
                            onExited: {
                                chaBtn.icon.color="#dddee0"

                            }
                            onClicked: {

                                appWindoow.close()
                            }
                        }
                    }



                }


            }
        }

        Rectangle{
            anchors.top: parent.top
            height:225
            width:parent.width
            color:"red"



            Rectangle{
                anchors.left: parent.left
                height:225
                width:parent.width*0.5

                Button{
                    id:qqBtn
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    anchors.rightMargin: 10
                    height:99
                    width: 99
                    icon {

                        height:99
                        width:99
                        color:"#1191ff"
                        source: "qrc:/images/QQLogin"

                    }
                    background: Rectangle{
                        id:qqBtnRectangle
                        anchors.fill: parent
                        color:"#ffffff"

                        MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true


                            onEntered: {
                                qqBtn.icon.color="#1191ff"
                                qqText.color="#1191ff"

                            }
                            onExited: {
                                if(xuanzhong=="QQ"){return}
                                qqBtn.icon.color="#a6a6a6"
                                qqText.color="#a6a6a6"

                            }
                            onClicked: {
                                xuanzhong="QQ"
                                weChatBtn.icon.color="#a6a6a6"
                                weChatText.color="#a6a6a6"
                                qqBtn.icon.color="#1191ff"
                                qqText.color="#1191ff"
                                  loginLoaderPage.source="QQLoginPage.qml"
                            }
                        }
                    }



                }

                Text{
                    id:qqText
                    text:"QQ登录"
                    font.bold: true
                    font.pixelSize: 20
                    anchors.top: qqBtn.bottom
                    anchors.right: parent.right
                    anchors.rightMargin: 30
                    color:"#1191ff"

                }



            }


            Rectangle{
                anchors.right: parent.right
                height:225
                width:parent.width*0.5



                Button{
                    id:weChatBtn
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 10

                    height:99
                    width: 99
                    icon {

                        height:99
                        width:99
                        color: "#a6a6a6"
                        source: "qrc:/images/weChatLogin"

                    }
                    background: Rectangle{
                        id:weChatBtnRectangle
                        anchors.fill: parent
                        color:"#ffffff"

                        MouseArea{
                            anchors.fill: parent
                            hoverEnabled: true


                            onEntered: {
                                if(weChatBtn.icon.color=="#17c444"){return}
                                weChatBtn.icon.color="#17c444"
                                weChatText.color="#17c444"

                            }
                            onExited: {
                                if(xuanzhong=="WX"){return}
                                weChatBtn.icon.color="#a6a6a6"
                                weChatText.color="#a6a6a6"
                            }
                            onClicked: {

                                xuanzhong="WX"
                                weChatBtn.icon.color="#17c444"
                                weChatText.color="#17c444"
                                qqBtn.icon.color="#a6a6a6"
                                qqText.color="#a6a6a6"
                                loginLoaderPage.source="WechtLoginPage.qml"


                            }
                        }
                    }



                }

                Text{
                    id:weChatText
                    text:"WeChat登录"
                    font.bold: true
                    font.pixelSize: 20
                    anchors.top: weChatBtn.bottom
                    color:"#a6a6a6"
                    anchors.left: parent.left
                    anchors.leftMargin: 15
                }

            }

        }

        Rectangle{
            anchors.bottom:  parent.bottom
            height:425
            width:parent.width

            Loader{
                id:loginLoaderPage
                anchors.fill: parent
                source: "QQLoginPage.qml"
            }
        }
    }



}

//RowLayout{
//    id:loginHome
//    anchors.fill: parent
//    spacing: 0
//    //左侧
//    property bool isOpen :false


//    Rectangle{
//        id:j
//        Layout.preferredHeight:  parent.height
//        Layout.preferredWidth: parent.width*0.6

//        Image{
//            anchors.fill: parent
//            source: "qrc:/images/xinbeijing"

//        }
//        Button {
//            height:80
//            width:85
//            background: Image{
//                anchors.fill: parent
//                source: "qrc:/images/logo"
//            }
//            onClicked: {
//                console.log(j.width)
//                console.log(j.height)
//                console.log(b.width)
//                console.log(b.height)
//            }
//        }
//    }

//    //右侧
//    Rectangle{
//        id:loginRight
//        Layout.fillHeight: true
//        Layout.fillWidth: true
//        color:"black"

//        ColumnLayout{
//            anchors.fill: parent
//            spacing: 0
//            Rectangle{
//                anchors.left:parent.left
//                anchors.top: parent.top
//               height:parent.height*0.1
//                width: parent.width
//                //状态栏
//                RowLayout{
//                    anchors.fill: parent

//                    //                    ComponentButton{
//                    //                        anchors.right: cha.left
//                    //                        iconSource:"qrc:/images/shezhi"
//                    //                        iconWidth: 23
//                    //                        iconHeight: 22
//                    //                        //默认颜色
//                    //                        defaultIconColor: "#a6a6a6"
//                    //                        //移入颜色
//                    //                        defaultRectangleColor: "#ffffff"
//                    //                        moveIconColor: "#000000"
//                    //                        moveRectangleColor: "#ffffff"
//                    //                        removeIconCorlor: "#a6a6a6"
//                    //                        removeRectangleColor: "#ffffff"
//                    //                    }

//                    Button{
//                        anchors.right: cha.left
//                        height:50
//                        width:50
//                        icon{
//                            height:23
//                            width:23
//                            source:"qrc:/images/shezhi"
//                            color:"#a6a6a6"
//                        }
//                        background:Rectangle{
//                            anchors.fill: parent
//                            color:"#ffffff"

//                        }
//                    }

//                    Button{
//                        id:loginSetting
//                        anchors.right: cha.left
//                        height:50
//                        width:50
//                        icon{
//                            height:23
//                            width:23
//                            source:"qrc:/images/shezhi"
//                            color:"#a6a6a6"
//                        }
//                        background:Rectangle{
//                            anchors.fill: parent
//                            color:"#ffffff"

//                            MouseArea{
//                                anchors.fill: parent;
//                                hoverEnabled: true;
//                                onEntered: {    //鼠标移入
//                                    loginSetting.icon.color = "#a1a2a6"
//                                    //背景

//                                }
//                                onExited: {
//                                    //移出icon颜色
//                                    loginSetting.icon.color = "#d5d6da";
//                                    //移出背景色
//                                }
//                            }

//                        }
//                    }


//                    Button{
//                        id:cha
//                        anchors.right:  hspace.right
//                        height:50
//                        width:50
//                        icon{
//                            height:18
//                            width:18
//                            source:"qrc:/images/cha"
//                            color:"#a6a6a6"
//                        }
//                        background:Rectangle{
//                            anchors.fill: parent
//                            color:"#ffffff"


//                            MouseArea{
//                                anchors.fill: parent;
//                                hoverEnabled: true;
//                                onEntered: {    //鼠标移入
//                                    cha.icon.color = "#a1a2a6"
//                                    //背景

//                                }
//                                onExited: {
//                                    //移出icon颜色
//                                    cha.icon.color = "#d5d6da";
//                                    //移出背景色
//                                }
//                                onClicked: {
//                                appWindoow.close()
//                                }
//                            }
//                        }
//                    }
//                    Item{
//                        id:hspace
//                        width:5
//                        height:10

//                    }
//                }
//            }
//            Rectangle{
//                Layout.fillHeight: true
//                Layout.preferredWidth: parent.width
//                color:"blue"
//                ColumnLayout{
//                    anchors.fill: parent
//                    Rectangle{
//                        height:200
//                        Layout.preferredWidth: parent.width
//                        RowLayout{
//                            anchors.fill: parent



//                            Button{
//                                id:qqIcon
//                                anchors.left: parent.left
//                                anchors.leftMargin: 50

//                                background:Rectangle{
//                                    id:qqIconRectangle
//                                    anchors.fill:parent
//                                    color:"#1191ff"
//                                    radius:90
//                                    MouseArea{
//                                        anchors.fill: parent;
//                                        hoverEnabled: true;
//                                        onEntered: {    //鼠标移入
//                                            qqIcon.icon.color = "#ffffff"
//                                            //背景色
//                                            qqIconRectangle.color = "#1191ff"
//                                        }
//                                        onExited: {
//                                            if(isOpen){
//                                                return}
//                                            qqIcon.icon.color = "#a6a6a6"
//                                            //移出背景色
//                                            qqIconRectangle.color =  "#f5f5f5"
//                                        }
//                                        onPressed: {
//                                            console.log("点击")
//                                            qqIcon.icon.color = "#ffffff"
//                                            //背景色
//                                            qqIconRectangle.color = "#1191ff"

//                                            weixin.icon.color = "#a6a6a6"
//                                            //移出背景色
//                                            weixinIconRectangle.color =  "#f5f5f5"
//                                            isOpen=true
//                                            pageLoader.source="QQLogin.qml"
//                                        }

//                                    }
//                                }
//                                icon{
//                                    height:85
//                                    width:85
//                                    source:"qrc:/images/QQ"
//                                    color:"#ffffff"
//                                }



//                            }




//                            Item{
//                                id:sp
//                                width:5
//                                height:10
//                            }


//                            Button{
//                                id:weixin
//                                anchors.right: parent.right
//                                anchors.rightMargin: 50

//                                background:Rectangle{
//                                    id:weixinIconRectangle
//                                    anchors.fill:parent
//                                    color:"#f5f5f5"
//                                    radius:90
//                                    MouseArea{
//                                        anchors.fill: parent;
//                                        hoverEnabled: true;
//                                        onEntered: {    //鼠标移入
//                                            weixin.icon.color = "#ffffff"
//                                            //背景色
//                                            weixinIconRectangle.color = "#72f28f"
//                                        }
//                                        onExited: {
//                                            if(!isOpen){
//                                                return}
//                                            weixin.icon.color = "#a6a6a6"
//                                            //移出背景色
//                                            weixinIconRectangle.color =  "#f5f5f5"
//                                        }
//                                        onPressed: {
//                                            console.log("点击")
//                                            qqIcon.icon.color = "#ffffff"
//                                            //背景色
//                                            qqIconRectangle.color = "#1191ff"
//                                            qqIcon.icon.color = "#a6a6a6"
//                                            //移出背景色
//                                            isOpen=false
//                                            qqIconRectangle.color =  "#f5f5f5"
//                                            pageLoader.source="WachatLogin.qml"
//                                        }
//                                    }
//                                }
//                                icon{
//                                    height:85
//                                    width:85
//                                    source:"qrc:/images/weixin"
//                                    color:"#a9a9a9"
//                                }

//                            }

//                        }

//                    }
//                    Rectangle{
//                        height:150
//                        Layout.preferredWidth: parent.width
//                        color:"black"}
//                }

//            }



//            Rectangle{
//                id:loginPageItem
//                Layout.preferredHeight:(parent.height*0.6)
//                color:"pink"
//                Layout.fillWidth: true
//                Loader {
//                    anchors.fill: parent
//                    id: pageLoader
//                    source: "QQLogin.qml"
//                }
//            }
//        }
//    }


//}
